<div v-for="(item, index) in 10" class="list-box-item">
  <div class="flex align-center text-align-center margin-top-15 margin-bottom-15">
    <div class="flex-2 flex-column justify-center align-center">
      <span>20 Sep</span>
      <span>19:35</span>
    </div>
    <div class="flex-6 flex">
      <a href="teamDetail.html" class="flex-2 flex align-center">
        <span class="flex-1 width-0 text-ellipsis-2 text-color-primary">Man Utd</span>
        <img class="width-height-15" src="./images/ball_park.png" alt="" srcset="" />
      </a>
      <div class="flex-1 flex-column align-center justify-center">
        <div class="text-color-grey font-size-small">VS</div>
        <!-- <template v-else>
              <div class="text-red font-weight-bold" :class="handicapEnum[item.score_result].color">{{ item.full_time_score }}</div>
              <div class="text-gray">({{ item.half_time_score }})</div>
            </template> -->
      </div>
      <a href="teamDetail.html" class="flex-2 flex align-center">
        <img class="width-height-15" src="./images/ball_park.png" alt="" srcset="" />
        <span class="flex-1 width-0 text-ellipsis-2 text-color-primary">Chelsea</span>
      </a>
    </div>
    <div class="flex-1 flex-column justify-center align-center text-green">
      <span>-1.0</span>
      <span>D</span>
    </div>
    <div class="flex-1 flex-column justify-center align-center text-red">
      <span>3.0</span>
      <span>U</span>
    </div>
    <div class="flex-1 flex-column justify-center align-center">
      <span>13</span>
      <span class="text-gray">5-8</span>
    </div>
  </div>
</div>
